﻿<template>
  <!-- 客服 -->
  <div class="kefu">
    <div class="nav_bar">
      <van-nav-bar title="客服" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="main">
      <div class="Mtop">{{ time | formatTime('MDHM')}}</div>
      <div class="conent" v-for="(item,index) in list" :key="index">
        <div class="Lef bor" ref="kefu" v-show="item.admin === undefined ? false:true">
          <span>
            <!-- <img src="../../assets/vipcard.png" alt /> -->
          </span>
          <p>{{item.admin}}</p>
        </div>
        <div class="Rig bor" ref="user" v-show="item.user === undefined ? false:true">
          <p>{{item.user}}</p>
          <span>
            <!-- <img src="../../assets/shangpin.png" alt /> -->
          </span>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="lef">
        <van-icon name="volume-o" color="#000" size="28px" />
      </div>
      <div class="cen">
        <input type="text" placeholder v-model="val" />
      </div>
      <div class="rig">
        <van-icon name="smile-o" color="#000" size="28px" />
        <van-icon name="add-o" color="#000" size="28px" @click="sendout" />
      </div>
    </div>
  </div>
</template>
<script>
import { formatTime } from '../untils/dataFormet';
export default {
  data() {
    return {
      time: new Date(),
      list: [{ admin: '亲，您有什么需要！' }],
      val: '',
      s: [
        '在吗',
        '你好',
        '我喜欢你',
        '我真的喜欢你',
        '怎么这么久不回复我？',
        '最近去哪了',
        '亲，包邮吗？',
      ],
      a: [
        '亲，没在！',
        '大家好才是真的好！',
        '...',
        '恩，我真的觉得你挺好的..',
        '刚刚洗澡去了',
        '我回乡下陪爷爷采茶去了！',
        '包邮的，亲！',
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.go(0);
    },
    sendout() {
      if (this.val) {
        this.list.push({ user: this.val });
        var index = this.s.indexOf(this.val); /*索引 | -1*/
        var anStr = this.a[index]
          ? this.a[index]
          : '风很大，我听不到你在说什么...';
        this.list.push({ admin: anStr });
        this.val = '';
      } else {
        this.$notify('请输入要发送的消息！');
      }
    },
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector('.main ');

        container.scrollTop = container.scrollHeight;
      });
    },
  },
  mounted() {
    this.scrollToBottom();
  },
  //每次页面渲染完之后滚动条在最底部
  updated() {
    this.scrollToBottom();
  },
  filters: {
    formatTime: formatTime, //日期过滤
  },
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 0.28rem;
}
.van-nav-bar {
  background: RGBA(48, 48, 48, 1);
  color: #fff;
  width: 100%
}
.van-nav-bar__text,
.van-nav-bar__title,
.van-icon {
  color: #fff;
}
.van-nav-bar__title {
  max-width: none;
}
.kefu {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  overflow: auto;
}
.foot {
    width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lef {
  width: 1rem;
  height: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.rig {
  width: 1.6rem;
  height: 1rem;
  justify-content: space-around;
  align-items: center;
  display: flex;
  box-sizing: border-box;
  padding: 0 0.1rem;
}
.cen > input {
  width: 100%;
  height: 0.44rem;
  border: 1px solid rgba(2, 2, 2, 0.5019607843137255);
  opacity: 1;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  padding-left: 0.2rem;
}
.Mtop {
  margin: 0.2rem auto;
  width: 2.12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.28rem;
  font-size: 0.18rem;
  background: rgba(216, 216, 216, 0.3);
  border-radius: 24px;
  color: rgba(51, 51, 51, 1);
}
.bor {
  width: 100vw;
  overflow: hidden;
  color: rgba(51, 51, 51, 1);
  display: flex;
}
.bor > span > img {
  width: 1rem;
  height: 1rem;
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
}

.Lef > p {
  border-radius: 10px;
  padding: 0.1rem;
  margin-left: 0.2rem;
  margin-right: 1.5rem;
  font-size: 0.16rem;
  background: rgba(216, 216, 216, 1);
}
.Lef,
.Rig {
  margin-bottom: 0.2rem;
  display: flex;
}
.Rig {
  justify-content: flex-end;
}
.Rig > p {
  border-radius: 10px;
  background: rgba(247, 204, 153, 1);
  display: flex;
  padding: 0.1rem;
  margin-right: 0.2rem;
  margin-left: 1.5rem;
  font-size: 0.16rem;
}
</style>
